<template>
	<div id="Complain">
		<x-header :left-options="{showBack: false}" title="投诉" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" href="#/PlainList"><i class="tp-icon icon-plain"></i></a>
		</x-header>
		<group class="title">
			<img src="../assets/images/home/icon_right2.png" alt="" />
			<cell title="投诉原因" :value="cause" @click.native="content=true">

			</cell>
		</group>
		<div class="infoWrap">
			<img :src="'/los' + goodsInfo.goods_thumb" alt="" />
			<div class="desc">
				<span>{{goodsInfo.goods_name}}</span>
				<p v-html="goodsInfo.goods_content">{{goodsInfo.goods_content}}</p>
			</div>
		</div>
		<group class="textarea">
			<x-textarea id="text" :max="200" v-model="info" placeholder="请输入投诉内容" :show-counter="true" :height="180" :rows="12" :cols="50"></x-textarea>
		</group>
		<div class="photo">
			<ul class="img-list" id="imgList">
				<li class="last">
					<div class="add">选填(限3张)</div>
					<input id="file" type="file" class="fileprew" accept="image/*" multiple="multiple" />
				</li>
			</ul>
			<div id="hidden"></div>
		</div>
		<div class="issue" @click="complainInfo()">提交投诉</div>
		<popup v-model="content" style="background: #fff;height: 5.85rem;">
			<checker v-model="cause" v-for="(item,index) in commonList" :key="index">
				<checker-item :value="item" @on-item-click="onItemClick"> {{item}} </checker-item>
			</checker>
		</popup>
		<loading :show="show" text="上传中"></loading>
		<toast v-model="success" type="text" width="3.5rem">{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import 'lrz/dist/lrz.all.bundle'
	import axios from 'axios'
	import { XHeader, Cell, Group, Checklist, XTextarea, Toast, Loading, Popup, Checker, CheckerItem } from "vux";
	export default {
		data() {
			return {
				content: false,
				cause: '',
				success: false,
				show: false,
				msg: '',
				info: '',
				goodsInfo: '',
				commonList: ['违禁品', '图片违规', '分类错误', '商品是假的', '商品信息有误'],

			}
		},
		components: {
			XHeader,
			Cell,
			Group,
			Checklist,
			XTextarea,
			Toast,
			Loading,
			Popup,
			Checker,
			CheckerItem
		},
		mounted() {
			let _this = this;
			document.querySelector('#file').addEventListener('change', function() {
				let _that = this;
				let view = $('#imgList');
				//限制图片上传张数
				let imgcount = 2;
				for(let i = 0; i < _that.files.length; i++) {
					_this.show = true;
					lrz(_that.files[i]).then(function(rst) {
						//是否可继续添加
						let status = true;
						if(view.find('img').length > imgcount) {
							status = false;
							_this.success = !_this.success;
							_this.msg = '最多上传3张图片';
							$('.last').hide();
						}
						if(status) {
							let str = '<li>' +
								'<img src ="' + rst.base64 + '"/>' +
								'<a href="javascript:;" class="del">删除</a>' +
								'<input type="hidden" id="images" name="images[]" value="' + rst.base64 + '"/>'; +
							'</li>';

							view.prepend(str);
							if(i == _that.files.length - 1) {
								// 处理成功会执行
								_this.show = false;
							}
							//点击删除
							$(".del").on("click", function() {
								$(this).parent('li').remove();
								$(".last").show();
							});
						}
						//ajax上传
					}).catch(function(err) {
						// 处理失败会执行
						alert(err);
					})
				}
			});
		},
		activated() {
			this.getGoodsDetail();
		},
		deactivated() {
			this.$destroy();
		},
		methods: {
			//获取商品信息
			getGoodsDetail: function() {
				let auction_id = this.$route.params.auction_id;
				this.$http({
					method: 'GET',
					url: '/los/api/auction/details.json?auction_id=' + auction_id,
					data: ''
				}).then((result) => {
					this.goodsInfo = result.data.goods;
				}).catch((err) => {
					console.log(err);
				})
			},
			//提交投诉信息
			complainInfo: function() {
				let auction_id = this.$route.params.auction_id;
				var val = new Array;
				$('#imgList li input').each(function(index, item) {
					val[index] = $(this).val();
				})
				var vals = val.splice(0);
				vals.splice(vals.length - 1, 1);
				var params = {
					auction_id: auction_id,
					plaint_cause: this.cause,
					plaint_content: this.info,
					plaint_imgs: vals
				}
				console.log(params);
				if(this.cause == '' || this.info == '') {
					this.success = !this.success;
					this.msg = '请完善投诉信息';
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/auction/plaint.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							setTimeout(function() {
								window.history.go(-1);
							}, 1000)
						}
					}).catch((err) => {

					})
				}
			},

			onItemClick(value, disabled) {
				if(!this.disabled) {
					this.content = false
				}
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	#Complain {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.header {
		background: #fff;
	}
	
	.title {
		padding: 0 0.26rem;
		background: #fff;
		margin: 0.26rem 0;
		position: relative;
	}
	
	.title img {
		position: absolute;
		width: 0.32rem;
		height: 0.32rem;
		right: 0;
		top: 0.5rem;
	}
	
	.title .wrap {
		padding: 0;
	}
	
	.infoWrap {
		width: 100%;
		background: #fff;
		overflow: hidden;
		padding: 0.26rem;
		margin-bottom: 0.26rem;
	}
	
	.infoWrap img {
		float: left;
		width: 2.37rem;
		height: 2.37rem;
		border-radius: 0.1rem;
	}
	
	.infoWrap .desc {
		float: right;
		margin-left: 0.26rem;
		width: 72%;
		overflow: hidden;
	}
	
	.infoWrap .desc span {
		display: block;
		line-height: 0.58rem;
		font-size: 0.34rem;
	}
	
	.infoWrap .desc p {
		margin-top: 0.32rem;
		line-height: 0.5rem;
		height: 1.5rem;
		overflow: hidden;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.textarea {
		height: 4.2rem;
	}
	
	.issue {
		width: 8.56rem;
		height: 1.3rem;
		background: #a30000;
		color: #fff;
		line-height: 1.3rem;
		text-align: center;
		border-radius: 0.05rem;
		font-size: 0.4rem;
		margin: 1rem auto 0.4rem;
	}
	
	.vux-checker-box {
		height: 1.17rem;
		line-height: 1.17rem;
		font-size: 0.37rem;
		text-align: center;
		position: relative;
	}
	
	.vux-checker-box:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
</style>
<style>
	/*上传图片*/
	
	.photo {
		background: #fff;
		position: relative;
	}
	
	.photo:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		width: 96%;
		margin: 0 auto;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.photo .img-list {
		overflow: hidden;
		padding: 0.26rem;
	}
	
	.photo .img-list li {
		position: relative;
		float: left;
		width: 2.18rem;
		height: 2.18rem;
		margin-left: 0.24rem;
	}
	
	.photo .img-list li:nth-child(4n-3) {
		margin-left: 0;
	}
	
	.photo .img-list li img {
		width: 2.18rem;
		height: 2.18rem;
	}
	
	.photo .img-list li .del {
		position: absolute;
		right: 0.10666rem;
		top: 0.10666rem;
		width: 0.58666rem;
		height: 0.58666rem;
		font-size: 0;
		background: url(../assets/images/home/icon_del.png) center center no-repeat;
		background-size: 100%;
	}
	
	.photo .img-list li.last {
		text-align: center;
		padding-top: 1.52rem;
		font-size: 0.34666rem;
		color: #aaa;
		border: dashed 1px #e6e6e6;
	}
	
	.photo .img-list li.last:after {
		content: '';
		position: absolute;
		left: 50%;
		top: 0.48rem;
		width: 1px;
		height: 0.61333rem;
		background-color: #aaa;
	}
	
	.photo .img-list li.last:before {
		content: '';
		position: absolute;
		left: 0.77333rem;
		top: 0.8rem;
		width: 0.61333rem;
		height: 1px;
		background-color: #aaa;
	}
	
	.photo .img-list li .fileprew {
		position: absolute;
		top: 0;
		left: 0;
		width: 2.18rem;
		height: 2.18rem;
		font-size: 1.33333rem;
		opacity: 0;
		/* 实现的关键点 */
		filter: alpha(opacity=0);
		/* 兼容IE */
	}
</style>